<template>
  <div class="dictionaryManaged">
      <div class="dic-Content">
        <div class="dic-Content-big">
          <!-- <div class="dic-Content-top">
            字典管理
          </div> -->
          <div class="dic-Content-text">
            <div class="dic-Content-text-left">
              <div class="dic-Content-text-left-title">
                字典管理（30）
              </div>
              <div class="dic-Content-text-left-text">
                <div style="margin-bottom: 10px;margin-top: 4px;" v-for="(item,i) in leaveMenu" :key="i">
                  <div class="dic-Content-text-left-text-one">
                    <img v-if="item.show" @click="leaveMenuClick(item,i)" src="../../../assets/images/iconszhankai.png" style="width:12px;height:12px;margin-right:8px;" alt="" srcset="">
                    <img v-else @click="leaveMenuClick(item,i)" src="../../../assets/images/iconsshouqi.png" style="width:12px;height:12px;margin-right:8px;" alt="" srcset="">
                    <img src="../../../assets/images/file_icon.png" style="width:16px;height:16px;margin-right:2px;" alt="" srcset="">
                    <div>{{item.name}}</div>
                    <div>（{{item.children && item.children.length?item.children.length:0}}）</div>
                  </div>
                  <el-collapse-transition>
                    <div v-show="item.show">
                      <div style="padding-top: 11px;padding-bottom: 6px;box-sizing: border-box;">
                        <div class="dic-Content-text-left-text-child" :class="{'childActive': itemName == it.name}" v-for="(it,j) in item.children" @click="itemClick(it.name)" :key="j">
                          <img src="../../../assets/images/file_icon.png" style="width:16px;height:16px;margin-right:2px;" alt="" srcset="">
                          <div>{{ it.name }}</div>
                        </div>
                      </div>
                    </div>
                  </el-collapse-transition>
                </div>
              </div>
            </div>
            <div class="dic-Content-text-right">
                <caiwuhesuan v-if="itemName == '财务核算'" />
                <feiyongzhonglei v-if="itemName == '费用中类'" />
                <mentebingzhong v-if="itemName == '门特病种'" />
                <feiyongdalei v-if="itemName == '费用大类'" />
                <yaopinleibie v-if="itemName == '药品类别'" />
                <yaopindalei v-if="itemName == '药品大类'" />
                <yaopinzhonglei v-if="itemName == '药品中类'" />
                <fuyaocishu v-if="itemName == '服药次数'" />
                <fuyaoyongfa v-if="itemName == '服药用法'" />
                <jixingdaima v-if="itemName == '剂型代码'" />
                <jiliangdanwei v-if="itemName == '计量单位'" />
                <candibianma v-if="itemName == '产地编码'" />
                <kangshengsufenlei v-if="itemName == '抗生素分类'" />
                <renyuanleibie v-if="itemName == '人员类别'" />
                <ruyuanfangsi v-if="itemName == '入院方式'" />
                <chuyuanfangsi v-if="itemName == '出院方式'" />
                <yibaoleibie v-if="itemName == '医保类别'" />
                <fukuanfangsi v-if="itemName == '付款方式'" />
                <menzhenleibie v-if="itemName == '门诊类别'" />
                <xieyichufang v-if="itemName == '协议处方'" />
                <bumenbiaoji v-if="itemName == '部门标记'" />
                <zhengzhuangdaima v-if="itemName == '症状代码'" />
                <shengmentebingzhong v-if="itemName == '省门特病种'" />
                <bingqufenlei v-if="itemName == '病区分类'" />
                <danjuleixing v-if="itemName == '单据类型'" />
                <binglizidian v-if="itemName == '病历字典'" />
                <laiyuantujing v-if="itemName == '来源途径'" />
                <biaobenxinxi v-if="itemName == '标本信息'" />
                <cihuixinxi v-if="itemName == '词汇信息'" />
                <zhenshibianma v-if="itemName == '诊室编码'" />
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script setup>
import caiwuhesuan from "./components/caiwuhesuan"
import feiyongdalei from "./components/feiyongdalei"
import feiyongzhonglei from "./components/feiyongzhonglei"
import mentebingzhong from "./components/mentebingzhong"
import yaopinleibie from "./components/yaopinleibie"
import yaopindalei from "./components/yaopindalei"
import yaopinzhonglei from "./components/yaopinzhonglei"
import fuyaocishu from "./components/fuyaocishu"
import fuyaoyongfa from "./components/fuyaoyongfa"
import jixingdaima from "./components/jixingdaima"
import jiliangdanwei from "./components/jiliangdanwei"
import candibianma from "./components/candibianma"
import kangshengsufenlei from "./components/kangshengsufenlei"
import renyuanleibie from "./components/renyuanleibie"
import ruyuanfangsi from "./components/ruyuanfangsi"
import chuyuanfangsi from "./components/chuyuanfangsi"
import yibaoleibie from "./components/yibaoleibie"
import fukuanfangsi from "./components/fukuanfangsi"
import menzhenleibie from "./components/menzhenleibie"
import xieyichufang from "./components/xieyichufang"
import bumenbiaoji from "./components/bumenbiaoji"
import zhengzhuangdaima from "./components/zhengzhuangdaima"
import shengmentebingzhong from "./components/shengmentebingzhong"
import bingqufenlei from "./components/bingqufenlei"
import danjuleixing from "./components/danjuleixing"
import binglizidian from "./components/binglizidian"
import laiyuantujing from "./components/laiyuantujing"
import biaobenxinxi from "./components/biaobenxinxi"
import cihuixinxi from "./components/cihuixinxi"
import zhenshibianma from "./components/zhenshibianma"
import { ref, onMounted } from "vue";
const itemName = ref('财务核算')
const menushow = ref(0)
const leaveMenu = ref([
  {
    name:'费用管理',
    show:true,
    children:[
      {
        name:'财务核算',
      },
      {
        name:'费用中类',
      },
      {
        name:'费用大类',
      }
    ]
  },
  {
    name:'药品管理',
    show:false,
    children:[
      {
        name:'药品类别',
      },
      {
        name:'药品大类',
      },
      {
        name:'药品中类',
      },
      {
        name:'服药次数',
      },
      {
        name:'服药用法',
      },
      {
        name:'剂型代码',
      },
      {
        name:'计量单位',
      },
      {
        name:'产地编码',
      },
      {
        name:'抗生素分类',
      }
    ]
  },
  {
    name:'人员管理',
    show:false,
    children:[
      {
        name:'人员类别',
      },
      {
        name:'入院方式',
      },
      {
        name:'出院方式'
      },
      {
        name:'医保类别',
      },
      {
        name:'付款方式',
      },
      {
        name:'门诊类别'
      },
      {
        name:'协议处方'
      },
    ]
  },
  {
    name:'部门管理',
    show:false,
    children:[
      {
        name:'部门标记',
      },
      {
        name:'症状代码',
      }
    ]
  },
  {
    name:'其他管理',
    show:false,
    children:[
      {
        name:'门特病种',
      },
      {
        name:'省门特病种',
      },
      {
        name:'病区分类'
      },
      {
        name:'单据类型',
      },
      {
        name:'病历字典',
      },
      {
        name:'来源途径'
      },
      {
        name:'标本信息'
      },
      {
        name:'词汇信息'
      },
      {
        name:'诊室编码'
      },
    ]
  }
])
const leaveMenuClick = ((item,i)=>{
  leaveMenu.value.forEach((v,j)=>{
    if(j == i){
      v.show = !v.show
    }else{
      v.show = false
    }
  })
})
const itemClick = (name)=>{
  itemName.value = name
}
</script>

<style lang="scss" scoped>
.childActive{
  color: #359DE1 !important;
}
.dictionaryManaged{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #F7F7F7;
  .dic-Content{
    width: 100%;
    height: calc(100vh - 100px);
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    // padding: 16px;
    box-sizing: border-box;
    .dic-Content-big{
      width: 100%;
      height: calc(100vh - 100px);
      // border: 1px solid #E0E0E0;
      border-radius: 4px 4px 4px 4px;
      .dic-Content-top{
        // width: 100%;
        // // height: 40px;
        // // background: #F7F7F7;
        // border-radius: 4px 4px 0px 0px;
        // border-bottom: 1px solid #E0E0E0;
        // display: flex;
        // align-items: center;
        // font-weight: bold;
        // font-size: 14px;
        // color: #333333;
        // padding: 12px;
        // box-sizing: border-box;
      }
      .dic-Content-text{
        width: 100%;
        height: calc(100vh - 100px);
        background: #fff;
        display: flex;
        align-items: flex-start;
        .dic-Content-text-left{
          flex: 0 0 209px;
          height: calc(100vh - 100px);
          border-right: 1px solid #EBEBEB;
          padding: 12px;
          box-sizing: border-box;
          .dic-Content-text-left-title{
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            margin-bottom: 12px;
          }
          .dic-Content-text-left-text{
            width: 100%;
            height: calc(100vh - 256px);
            overflow-y: auto;
            .dic-Content-text-left-text-one{
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #333333;
              cursor: pointer;
            }
            .dic-Content-text-left-text-child{
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #333333;
              padding-left: 38px;
              box-sizing: border-box;
              margin-bottom: 10px;
              cursor: pointer;
            }
            .dic-Content-text-left-text-child:last-child{
              margin-bottom: 0 !important;
            }
          }
        }
        .dic-Content-text-right{
          width: 100%;
          padding: 12px;
          height: calc(100vh - 100px);
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>